<template>
  <el-dialog width="470px" class="app-dialog" title="个人资料" :visible.sync="visible" :before-close="handleClose">
    <div class="content">
      <div class="header">
        <el-avatar :size="80" :src="avatar">
          <img v-if="gender == 1" src="@/assets/images/man.png" />
          <img v-else-if="gender == 2" src="@/assets/images/woman.png" />
          <img v-else src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
        </el-avatar>
        <div class="flex">
          <div>{{ baseDetails.name }}</div>
          <div>{{ baseDetails.roles.join() }}</div>
        </div>
      </div>

      <div>手机号：{{ baseDetails.phoneNumber }}</div>
      <div>邮箱：{{ baseDetails.email }}</div>
      <div>部门：{{ userDetails.departmentName }}</div>
      <div>直属上级：{{ userDetails.oaParentJobNum }}</div>
      <div>在职状态：{{ userDetails.oaStatusName }}</div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'UserDetails',
  data: function () {
    return {
      gender: null,
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    '$store.state.user.details': function (nval) {
      if (nval) this.gender = JSON.parse(nval).gender
    },
  },
  created() {
    this.gender = this.$store.state.user.details && JSON.parse(this.$store.state.user.details).gender
  },
  computed: {
    baseDetails() {
      return this.$store.state.user
    },
    userDetails() {
      return this.$store.state.user.details && JSON.parse(this.$store.state.user.details)
    },
    avatar() {
      try {
        return this.baseDetails.avatar.includes('http')
          ? this.baseDetails.avatar
          : `${public_config.configuration_api}/api/file-management/files/www/` + this.baseDetails.avatar
      } catch (error) {}
    },
  },
  methods: {
    handleClose() {
      this.$emit('close', false)
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  max-width: 300px;
  padding: 0.4rem 0;
  text-align: left;
  margin: 0 auto;
  .header {
    display: flex;
    margin-bottom: 20px;
    .flex {
      flex: 1;
      div {
        margin: 0;
      }
    }
    .el-avatar {
      margin-right: 15px;
    }
  }
  div {
    font-size: 14px;
    color: #333333;
    margin: 10px 0;
    font-style: normal;
    line-height: 30px;
  }
}
</style>
